<script lang="ts" setup>
import { ref } from 'vue'
const submit = function () {
  uni.navigateTo({
    url: '/userPages/consumptionSettings/consumptionPrograms'
  })
}
</script>

<template>
  <view class="total">
    <view class="card">
      <view class="head justify-between">
        <view class="left">全日房费</view>
        <view class="right">
          <text class="edit">edit</text>
          <text>delete</text>
        </view>
      </view>
      <view class="price">￥256.00</view>
      <u-divider></u-divider>
      <view class="bottom">
        <view class="num">编号：200</view>
        <view class="type">类别：全日房租</view>
      </view>
    </view>

    <view style="margin: 24rpx 24rpx 0 0; width: 700rpx !important">
      <u-button @click="submit" type="primary">新增消费项目</u-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.total {
  padding: 24rpx;
  font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
}
.card {
  background-color: #fff;
  padding: 36rpx 28rpx 0 32rpx;
  .edit {
    margin-right: 60rpx;
  }
  .price {
    color: #e85656;
    margin: 20rpx 0 20rpx;
    font-size: 32rpx;
  }
  :deep(.u-divider) {
    margin: 0;
  }
  .bottom {
    display: flex;
    height: 62rpx;
    line-height: 62rpx;
    color: #84878c;
    font-size: 28rpx;
    .num {
      margin-right: 196rpx;
    }
  }
}
</style>
